<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:masking-path-01-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-masking-path-01-b.html">Full version</a>, <a href="basic-masking-path-01-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/masking.html#ClippingPaths">14.3 Clipping paths</a></p>
 <p>
				<a href="full-masking-opacity-01-b.html">masking-opacity-01-b ←</a> 
				<a href="full-index.html">index</a>
				<a href="full-masking-path-02-b.html">→ masking-path-02-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>masking-path-01-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=480 height=360>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/masking-path-01-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=480 height=360 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/masking-path-01-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of masking-path-01-b" src="../png/full-masking-path-01-b.png" width="480" height="360"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
			<p>
				Test to see if the basic clipping works using the clipPath element
				and the clip-path property.
			</p>
			<p>
				This test uses the following elements : &lt;clipPath&gt; and the following 
				properties : clip-path.
			</p>
			<p>
				The test at the top shows a red rectangle (with black stroke) being clipped by another rectangle.
				So only the middle portion of the red rectangle should be visible. Also the black stroke should
				only be visible along the top and bottom edge of the rectangle.
			</p>
			<p>
				The example at the bottom has a group containing a text string and two rectangles. The group 
				has a clipping path defined using two  overlapping rectangles. Of concern is the overlapping area
				shared by the two rectangles. There should not be holes in this overlapping area, the
				clip region is the union of the two rectangles. For clarity, 
				guide rectangles in grey show the position of the clipping rectangles.
			</p>
			<p>
				The rendered picture should match the reference image exactly, except for possible
				variations in the labelling text (per CSS2 rules).  
			</p>

		</div>
<div class="linkbar"> <p>
				<a href="full-masking-opacity-01-b.html">masking-opacity-01-b ←</a>
				<a href="full-index.html">index</a>
				<a href="full-masking-path-02-b.html">→ masking-path-02-b</a>
						</p></div>
</body>
</html>
